<template>
  <div>
    <a-card >
      <a-row class="yy-Row">
        <a-col :span="4">
          <a-space>
            <a-button type="primary" v-has="'BtnQueryTemplate'" @click="queryTemplate">{{$t('btn.query')}}</a-button>
            <a-button type="primary" v-has="'BtnBindingClick'" @click="bindingClick">{{$t('btn.bind')}}</a-button>
            <a-button type="primary" v-has="'BtnShowDeleteConfirm'" @click="showDeleteConfirm">{{$t('btn.delete')}}</a-button>
            <a-upload
                v-has="'uploadTemplate' +
                 ''"
                name="file"
                :multiple="false"
                :headers="headers"
                :action="uploadUrl"
                @change="uploadTemplate"
                :showUploadList="false"
            >
              <a-button type="primary"  v-has="'BtnUploadTemplate'">{{$t('btn.uploadTemplate')}}</a-button>
            </a-upload>
            <a-upload
                v-has="'uploadPrintInfo'"
                name="printData"
                accept=".xlsx"
                :multiple="false"
                :headers="headers"
                :action="uploadPrintDataUrl"
                @change="uploadPrintInfo"
                :showUploadList="false"
            >
              <a-button type="primary"  v-has="'BtnImportPrintPara'">{{$t('btn.importPrintPara')}}</a-button>
            </a-upload>
          </a-space>
        </a-col>
      </a-row>

      <a-row class="yy-Row">
        <a-form-model layout="inline" :model="template"  :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-row>

            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.templateName')" style="width: 100%;">
                <a-input v-model="template.name"  allow-clear/>
              </a-form-model-item>
            </a-col>


          </a-row>

        </a-form-model>
      </a-row>

    </a-card>

    <a-card >
      <a-card-grid style="width: 30%;" :hoverable="false">
        <m-table
            :row-selection="rowSelection"
            :selection="true"
            bordered
            rowKey="key"
            :pagination="pageSize"
            :dataSource="templateListDataSource"
            :columns="templateListColumns" />
      </a-card-grid>

      <a-card-grid style="width: 70%;" :hoverable="false">

        <a-row class="yy-Row">
          <a-col :span="4">
            <a-space>
              <a-button type="primary" v-has="'BtnNewTemplate'" @click="newTemplate">{{$t('btn.newTemplate')}}</a-button>
              <a-button type="primary" v-has="'BtnAddParameter'" @click="addParameter">{{$t('btn.addParameter')}}</a-button>
              <a-button type="primary" v-has="'BtnSave'" @click="save">{{$t('btn.save')}}</a-button>
            </a-space>
          </a-col>
        </a-row>

        <a-row class="yy-Row">
          <a-form-model layout="inline" :model="templateList" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            <a-row>
              <a-col :span="8">
                <a-form-model-item :label="$t('menuItem.templateName')" style="width: 100%;">
                  <a-input :disabled="templateNameDisabled" v-model="templateList.name"  allow-clear/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-row>

        <m-table
            bordered
            :pagination="rightPageSize"
            :dataSource="templateInfoDataSource"
            :columns="templateInfoColumns">
          <template slot="operation" slot-scope="text, record"  v-if="!record.isEmpty">
            <a-space>
              <a-button v-has="'BtnEdit'" size="small" type="primary" @click.stop="edit(record)" >{{$t('btn.edit')}}</a-button>
              <a-button v-has="'BtnDelete'" size="small" type="danger" @click.stop="delTemplateExtConfirm(record)" >{{$t('btn.delete')}}</a-button>
            </a-space>
          </template>
        </m-table>
      </a-card-grid>
    </a-card>

    <!-- 新增/編輯Template -->
    <a-modal centered
             width="50%"
             :visible="templateVisible"
             :title="$t('templateModalTitle')"
             :okText="$t('menuItem.confirm')"
             :cancelText="$t('menuItem.cancel')"
             @ok="handleOk"
             @cancel="handleCancel">
      <a-card>
        <a-form-model
            :model="addOrEditTemplate"
            ref="addOrEditTemplate"
            labelAlign="right"
            layout="inline"
            :rules="rules"
            :label-col="{span: 6}"
            :wrapper-col="{span: 16}"
        >
          <a-row style="margin:1rem 0">
            <a-col>
              <a-form-model-item :label="$t('type')"  style="width: 100%;" prop="type">
                <a-select
                    allowClear
                    @change="clearData"
                    v-model="addOrEditTemplate.type">
                  <a-select-option  v-for="item in typeList" :value="item.dataId" :key="item.dataId">
                    {{ item.dataDesc}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row style="margin:1rem 0">
            <a-col >
              <a-form-model-item :label="$t('barTenDerParameter')" style="width: 100%;" prop="parameter">
                <a-input allowClear v-model="addOrEditTemplate.parameter" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row style="margin:1rem 0">
            <a-col >
              <a-form-model-item :label="$t('value')"  style="width: 100%;" prop="value">
<!--                <a-input v-if="addOrEditTemplate.type==='STRING'" allowClear v-model="addOrEditTemplate.value" />-->
                <a-select v-if="addOrEditTemplate.type==='STRING'" allowClear v-model="addOrEditTemplate.value">
                  <a-select-option v-for="item in stringValueList" :value="item.dataDesc" :key="item.dataDesc">
                    {{ item.dataDesc}}
                  </a-select-option>
                </a-select>
                <a-select v-else-if="addOrEditTemplate.type==='PARAMETER'" allowClear v-model="addOrEditTemplate.value">
                  <a-select-option v-for="item in valueList" :value="item.dataDesc" :key="item.dataId">
                    {{ item.dataDesc}}
                  </a-select-option>
                </a-select>
                <a-select v-else-if="addOrEditTemplate.type==='DATE'" allowClear v-model="addOrEditTemplate.value">
                  <a-select-option v-for="item in dateList" :value="item.dataDesc" :key="item.dataDesc">
                    {{ item.dataDesc}}
                  </a-select-option>
                </a-select>
                <a-input v-else allowClear v-model="addOrEditTemplate.value" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
    </a-modal>

    <!-- 绑定弹窗 -->
    <binding-modal></binding-modal>
  </div>

</template>

<script>
import {mapState, mapMutations} from "vuex";
import BindingModal from "@/views/BarTender/BindingModal.vue";
import MTable from "../../components/MTable";
export default {
  name: "BarTenderTemplateConfig",
  components: {MTable, BindingModal},
  data() {
    return {
      rules: {
        type: [{required: true, message: this.$i18n.tc('typeContent')}],
        parameter: [{required: true, message: this.$i18n.tc('barTenDerParameterContent')}],
        value: [{required: true, message: this.$i18n.tc('valueContent')}],
      },
      pageSize: {
        size:"small",
        pageSize: 12,
      },
      rightPageSize: {
        size:"small",
        pageSize: 9,
      },
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
      templateListColumns: [
        {
          title: this.$t('menuItem.templateName'),
          dataIndex: 'templateName',
          key: 'id',
        }
      ],
      templateInfoColumns: [
        {
          title: this.$t('type'),
          dataIndex: 'type',
          key: Math.random(),
        },
        {
          title: this.$t('barTenDerParameter'),
          dataIndex: 'bartenderPara',
          key: Math.random(),
        },
        {
          title: this.$t('value'),
          dataIndex: 'value',
          key: Math.random(),
        },
        {
          title: this.$t('operation'),
          dataIndex: 'operation',
          scopedSlots: {
            customRender: 'operation'
          },
          width: 150
        }
      ],
      headers: {
        'token': window.localStorage.getItem('access_token')
      },
    };
  },
  computed: {
    ...mapState('barTender', ['template','labelCol','wrapperCol','rowSelection','templateInfoDataSource'
      ,'templateListDataSource','templateVisible','addOrEditTemplate','addOrEdit','templateNameDisabled',
      'templateList','bindingVisible','typeList','valueList','dateList','stringValueList'
    ,]),
  },
  methods: {
    ...mapMutations('barTender', ['setTemplateVisible','edit','del','addAndEditHandleOk','handleCancel','addParameter','newTemplate',
    'save','bindingHandleOk','bindingHandleCancel','bindingClick','queryTemplate','delTemplate','queryType','queryValue','queryDateValue',
      'queryBindingData','clearData','queryStringValue']),

    uploadUrl() {
      return process.env.VUE_APP_BASEURL + '/bisTemplate/export/uploadTemplate?templateName=' + this.templateList.name;
    },
    uploadPrintDataUrl() {
      return process.env.VUE_APP_BASEURL + '/bisTemplate/export/importPrintPara?evtUsr='+ window.localStorage.getItem("userIdMes");
    },

    uploadPrintInfo(info) {
      if (info.file.status == 'done') {
        if (info.file.response.code == '200') {
          this.$message.success("Import was successful");
        } else {
          this.$message.warn("Import failed");
        }
      }
    },
    uploadTemplate(info) {
      if (info.file.status === 'done') {
        if (info.file.response.code === '200') {
          this.$message.success(info.file.response.message);
        } else {
          this.$message.warn(info.file.response.message);
        }
      }else if(info.file.status === 'error'){
        this.$message.warn(info.file.response.msg);
      }
    },
    delTemplateExtConfirm(record) {
      this.$confirm({
        title: this.$i18n.tc('delTemplateExtContent'),
        okText: this.$i18n.tc('menuItem.confirm'),
        okType: 'danger',
        cancelText: this.$i18n.tc('menuItem.cancel'),
        onOk:()=> {
          this.del(record);
        },
        onCancel: () => {
          this.$message.success(this.$i18n.tc('cancelSuccess'));
        }

      });
    },
    handleOk() {
      this.$refs.addOrEditTemplate.validate(valid => {
        if (valid) {
          this.addAndEditHandleOk()
        }
      })
    },
    showDeleteConfirm() {
      this.$confirm({
        title: this.$i18n.tc('delContent'),
        okText: this.$i18n.tc('menuItem.confirm'),
        okType: 'danger',
        cancelText: this.$i18n.tc('menuItem.cancel'),
        onOk:()=> {
          this.delTemplate()
        },
        onCancel: () => {
          this.$message.success(this.$i18n.tc('cancelSuccess'));
        }

      });
    },
    setTableHeight(){
      let pageSize = parseInt((document.documentElement.clientHeight - 320) / 41)
      this.pageSize.pageSize = pageSize
      let rightPageSize = parseInt((document.documentElement.clientHeight - 450) / 41)
      this.rightPageSize.pageSize = rightPageSize

    },
  },
  watch:{
    windowHeight(val){
      this.setTableHeight()
    }
  },
  beforeMount() {
    this.setTableHeight()
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
    this.queryTemplate()
    this.queryType();
    this.queryValue();
    this.queryDateValue();
    this.queryStringValue();
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>
